<template>
  <a-card title="分类管理" :bordered="false" :loading="classificationLoading">
    <template #extra>
      <a @click="openManageModal('AC')">添加</a>
    </template>
    <a-empty v-if="classificationList.length === 0" description="暂无分类，可以通过右上角按钮添加"/>
    <div class="manage_card_content">
      <div class="manage_item" v-for="classification in classificationList" :key="classification.id">
        <div class="manage_item_name">{{ classification.name }}</div>
        <a-space>
          <span>{{ `(共${classification.count}篇)` }}</span>
          <router-link :to="`/u/${user.domain}?classification=${classification.id}`">查看</router-link>
          <a @click="openManageModal('UC',classification.id,classification.name)">编辑</a>
          <a-popconfirm title="确定要删除这个分类吗?" @confirm="deleteClassification(classification.id)">
            <a>删除</a>
          </a-popconfirm>
        </a-space>
      </div>
    </div>
  </a-card>
  <a-card title="标签管理" :bordered="false" :loading="tagLoading">
    <template #extra>
      <a @click="openManageModal('AT')">添加</a>
    </template>
    <a-empty v-if="tagList.length === 0" description="暂无标签，可以通过右上角按钮添加"/>
    <div class="manage_card_content">
      <div class="manage_item" v-for="tag in tagList" :key="tag.id">
        <span>{{ tag.name }}</span>
        <a-space>
          <a @click="openManageModal('UT',tag.id,tag.name)">编辑</a>
          <a-popconfirm title="确定要删除这个标签吗?" @confirm="deleteTag(tag.id)">
            <a>删除</a>
          </a-popconfirm>
        </a-space>
      </div>
    </div>
  </a-card>
  <!-- 弹窗 -->
  <a-modal v-model:visible="manageModal.visible" :title="manageModal.title" @ok="submitManageModal">
    <a-input v-model:value="manageModal.id" style="display: none"/>
    <a-input v-model:value="manageModal.name" :maxlength="15"/>
  </a-modal>
</template>

<script>
import { computed, defineComponent, getCurrentInstance, onMounted, reactive, toRefs } from 'vue'
import {
  AddClassification,
  AddTag,
  DeleteClassificationForUser,
  DeleteTag,
  GetClassificationList,
  GetTagList,
  UpdateClassification,
  UpdateTag
} from '@/service/blog'
import { useStore } from 'vuex'

export default defineComponent({
  setup () {
    const { proxy } = getCurrentInstance()
    const store = useStore()
    const state = reactive({
      user: computed(() => store.getters.user),
      classificationList: [{
        id: '',
        name: ''
      }],
      classificationLoading: true,
      tagList: [{
        id: '',
        name: ''
      }],
      tagLoading: true,
      manageModal: {
        visible: false,
        title: '',
        id: '',
        name: '',
        mark: ''
      }
    })

    const methods = reactive({
      refreshClassificationList: async () => {
        state.classificationLoading = true
        state.classificationList = await GetClassificationList()
        state.classificationLoading = false
      },
      refreshTagList: async () => {
        state.tagLoading = true
        state.tagList = await GetTagList()
        state.tagLoading = false
      },
      openManageModal: (mark, id, name) => {
        state.manageModal.mark = mark
        switch (mark) {
          case 'AC':
            state.manageModal.title = '请输入分类名称'
            state.manageModal.id = ''
            state.manageModal.name = ''
            break
          case 'AT':
            state.manageModal.title = '请输入标签名称'
            state.manageModal.id = ''
            state.manageModal.name = ''
            break
          case 'UC':
            state.manageModal.title = '编辑分类名称'
            state.manageModal.id = id
            state.manageModal.name = name
            break
          case 'UT':
            state.manageModal.title = '编辑标签名称'
            state.manageModal.id = id
            state.manageModal.name = name
        }
        state.manageModal.visible = true
      },
      submitManageModal: async () => {
        if (state.manageModal.name.trim().length === 0) {
          proxy.$message.warning('请填写有效名称！')
          return
        }
        switch (state.manageModal.mark) {
          case 'AC':
            await AddClassification(state.manageModal.name)
            state.manageModal.visible = false
            proxy.$message.success('操作成功！')
            await methods.refreshClassificationList()
            break
          case 'AT':
            await AddTag(state.manageModal.name)
            state.manageModal.visible = false
            proxy.$message.success('操作成功！')
            await methods.refreshTagList()
            break
          case 'UC':
            await UpdateClassification({
              id: state.manageModal.id,
              name: state.manageModal.name
            })
            state.manageModal.visible = false
            proxy.$message.success('操作成功！')
            await methods.refreshClassificationList()
            break
          case 'UT':
            await UpdateTag({
              id: state.manageModal.id,
              name: state.manageModal.name
            })
            state.manageModal.visible = false
            proxy.$message.success('操作成功！')
            await methods.refreshTagList()
        }
      },
      deleteClassification: async id => {
        await DeleteClassificationForUser(id)
        proxy.$message.success('删除成功！')
        await methods.refreshClassificationList()
      },
      deleteTag: async id => {
        await DeleteTag(id)
        proxy.$message.success('删除成功！')
        await methods.refreshTagList()
      }
    })

    onMounted(async () => {
      await methods.refreshClassificationList()
      await methods.refreshTagList()
    })

    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
  }
})
</script>

<style lang="less" scoped>
.manage_card_content {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;

  & .manage_item {
    width: 49%;
    padding: 15px;
    margin: 10px 0;
    border: #00000020 solid 1px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: space-between;

    & .manage_item_name {
      width: 50%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}

@media screen and (max-width: 1000px) {
  .manage_card_content {
    & .manage_item {
      width: 100%;
    }
  }
}
</style>
